<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="glass-effect rounded-xl p-6 w-full max-w-lg mx-4">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-lg font-bold cyber-text">连接测试结果</h3>
        <button 
          @click="$emit('close')"
          class="text-gray-400 hover:text-gray-600 transition-colors"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="text-center mb-6">
        <div 
          class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
          :class="result.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'"
        >
          <i 
            class="text-2xl"
            :class="result.success ? 'fas fa-check' : 'fas fa-times'"
          ></i>
        </div>
        <p 
          class="text-lg font-semibold mb-2"
          :class="result.success ? 'text-green-400' : 'text-red-400'"
        >
          {{ result.success ? '连接成功' : '连接失败' }}
        </p>
        <p class="text-gray-300">{{ result.message }}</p>
      </div>

      <!-- 成功时显示设备信息 -->
      <div v-if="result.success && result.details" class="space-y-4 mb-6">
        <h4 class="text-gray-300 font-semibold">设备信息</h4>
        <div class="bg-gray-800/50 rounded-lg p-4 space-y-2">
          <div class="flex justify-between">
            <span class="text-gray-400">延迟：</span>
            <span class="text-white">{{ result.details.latency }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">操作系统：</span>
            <span class="text-white">{{ result.details.os }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">CPU核心：</span>
            <span class="text-white">{{ result.details.cpuCores }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">内存：</span>
            <span class="text-white">{{ result.details.memory }}</span>
          </div>
        </div>
      </div>

      <!-- 失败时显示错误信息 -->
      <div v-if="!result.success && result.details" class="space-y-4 mb-6">
        <h4 class="text-gray-300 font-semibold">错误详情</h4>
        <div class="bg-red-900/20 border border-red-500/30 rounded-lg p-4">
          <div class="text-red-400 font-mono text-sm">
            <div>错误类型: {{ result.details.error }}</div>
            <div>错误代码: {{ result.details.code }}</div>
          </div>
        </div>
        
        <div class="text-gray-400 text-sm">
          <h5 class="font-semibold mb-2">可能的解决方案：</h5>
          <ul class="list-disc list-inside space-y-1">
            <li>检查IP地址和端口是否正确</li>
            <li>确认设备已启动且网络可达</li>
            <li>验证用户名和认证信息是否正确</li>
            <li>检查防火墙设置</li>
          </ul>
        </div>
      </div>

      <div class="flex justify-end">
        <button 
          @click="$emit('close')"
          class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface TestResult {
  success: boolean
  message: string
  details?: any
}

interface Props {
  result: TestResult
}

defineProps<Props>()
defineEmits<{
  close: []
}>()
</script>

